<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">

    <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="../bootstrap/css/bootstrap.css" rel="stylesheet">
    <script src="../bootstrap/js/jquery-3.3.1.min.js"></script>
    <script src="../bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../css/header.css">
    <link rel="stylesheet" type="text/css" href="../css/main.css">
    <link rel="stylesheet" type="text/css" href="../css/main2.css">
    <link rel="stylesheet" type="text/css" href="../css/manage.css">
    <link rel="stylesheet" type="text/css" href="../css/footer.css">

    <script src="../js/vue.js"></script>
    <link rel="stylesheet" href="../element/css/index.css">
    <script src="../element/index.js"></script>
    <script src="../js/axios.js"></script>
    <script src="../js/url.js"></script>
    <script src="../js/controller/headerController.js"></script>
    <script src="../js/service/headerService.js"></script>
    <script src="../js/controller/scheduleController.js"></script>
    <script src="../js/service/scheduleService.js"></script>

    <script src="../layui/layui.js" charset="utf-8"></script>
    <link rel="stylesheet" href="../layui/css/layui.css" media="all">

    <title>后台管理</title>
</head>

<body>
<!-- 导航栏 -->
<div id="header"></div>

<div id="schedule-vue">
    <!-- 主体 -->
    <div class="container">
        <div class="contents">
            <div class="nav-next">
                <div class="nav-title">
                    <h3>后台管理</h3>
                </div>
                <a class="cardId" href="user.html">用户管理</a>
                <a class="cardId" href="movie.html">影片管理</a>
                <a class="cardId" href="cinema.html">影院管理</a>
                <a class="cardId" href="hall.html">影厅管理</a>
                <a class="cardId" href="schedule.html">场次管理</a>
                <a class="cardId" href="comment.html">评论管理</a>
                <a class="cardId" href="order.html">订单管理</a>
            </div>
            <div class="nav-body">
                <!-- 场次管理 -->
                <div class="three card">
                    <div>
                        <div class="title">场次管理</div>
                        <hr/>
                    </div>
                    <!-- 场次列表 -->
                    <div class="schedulelist" v-show="operateCard=='index'">
                        <el-button icon="el-icon-plus" circle @click="changeOperateCard('add')"></el-button>
                        <el-button type="info" plain style="margin-left: 10px" @click="updateTodaySchedule">
                            更新今日计划
                        </el-button>
                        <el-button type="danger" plain style="margin-left: 10px" @click="deleteOldSchedule">
                            移除历史计划
                        </el-button>
                        <el-input placeholder="请输入电影名" v-model="keyword" clearable style="width:36%;margin-left: 25px">
                            <el-button slot="append" icon="el-icon-search"
                                       @click="searchScheduleByMovieName(1,10,keyword)"></el-button>
                        </el-input>
                        <el-button type="success" style="margin-left: 25px"
                                   @click="changeSearchCondition('up')">显示上映
                        </el-button>
                        <el-button type="warning" style="margin-left: 10px"
                                   @click="changeSearchCondition('down')">显示下架
                        </el-button>
                        <!-- 占位符 -->
                        <div style="margin-top: 20px;"></div>
                        <el-table :data="scheduleList" border style="width: 100%">
                            <el-table-column fixed prop="schedule.scheduleId" label="场次编号" width="80"></el-table-column>
                            <el-table-column prop="cinema.cinemaName" label="影院名称" width="300"></el-table-column>
                            <el-table-column prop="cinema.cinemaAddress" label="影院地址" width="360"></el-table-column>
                            <el-table-column prop="hall.hallName" label="影厅" width="120"></el-table-column>
                            <el-table-column prop="movieCnName" label="影片" width="160"></el-table-column>
                            <el-table-column prop="startDate" label="放映日期" width="120"></el-table-column>
                            <el-table-column prop="startTime" label="开始时间" width="100"></el-table-column>
                            <el-table-column prop="endTime" label="结束时间" width="100"></el-table-column>
                            <el-table-column fixed="right" label="操作" width="100">
                                <template slot-scope="scope">
                                    <el-button @click="deleteSchedule(scope.row.schedule.scheduleId)" type="text"
                                               size="small">取消计划
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <!--分页-->
                        <div style="margin-top: 20px">
                            <el-pagination background @size-change="handleSizeChange"
                                           @current-change="handleCurrentChange"
                                           :hide-on-single-page="value" :current-page="page.pageNum"
                                           :page-sizes="pageSizes"
                                           :page-size="page.pageSize" :pager-count="pagerCount" :total="page.total"
                                           layout="total, sizes, prev, pager, next, jumper">
                            </el-pagination>
                        </div>
                    </div>
                    <div v-show="operateCard=='add'">
                        <!--面包屑-->
                        <el-breadcrumb separator-class="el-icon-arrow-right">
                            <el-breadcrumb-item>
                                <el-link type="primary" @click="changeOperateCard('index')">首页</el-link>
                            </el-breadcrumb-item>
                            <el-breadcrumb-item>新增计划</el-breadcrumb-item>
                        </el-breadcrumb>
                        <!--占位符-->
                        <div style="margin-top: 25px"></div>

                        <el-button type="success" plain @click="addSchedule">提交</el-button>
                        <!--占位符-->
                        <div style="margin-top: 25px"></div>

                        <h3 class="addusertitle">影片放映计划</h3>
                        <div class="textside">
                            <div class="layui-form-item">
                                <label class="layui-form-label">放映影片</label>
                                <div class="layui-input-block addusertext">
                                    <select type="text" class="layui-select" style="width: 270px"
                                            v-model="schedule.movieId">
                                        <option v-for="movie in movieList" :value="movie.movieId">
                                            {{movie.movieCnName}}
                                        </option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">语言版本</label>
                                <div class="layui-input-block addusertext">
                                    <select type="text" class="layui-select" style="width: 270px"
                                            v-model="schedule.versionId">
                                        <option v-for="version in versionList" :value="version.versionId">
                                            {{version.versionName}}
                                        </option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">所在影院</label>
                                <div class="layui-input-block addusertext">
                                    <select type="text" class="layui-select" style="width: 270px"
                                            v-model="schedule.cinemaId">
                                        <option v-for="cinema in cinemaList" :value="cinema.cinemaId">
                                            {{cinema.cinemaName}}
                                        </option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-form-item" v-show="hallList.length != 0">
                                <label class="layui-form-label">放映厅</label>
                                <div class="layui-input-block addusertext">
                                    <select type="text" class="layui-select" style="width: 270px"
                                            v-model="schedule.hallId">
                                        <option v-for="hall in hallList" :value="hall.hallId">
                                            {{hall.hallName}}
                                        </option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">本场售价</label>
                                <div class="layui-input-block addusertext">
                                    <input type="number" step="0.01" class="layui-input"
                                           v-model="schedule.startPurchasePrice">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">放映日期</label>
                                <div class="layui-input-block addusertext">
                                    <input type="date" class="layui-input"
                                           v-model="schedule.date">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">放映时间</label>
                                <div class="layui-input-block addusertext">
                                    <input type="time" class="layui-input"
                                           v-model="schedule.time">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--加载页头-->
<script>
    // 当文档加载完成后执行
    $(document).ready(function () {
        // 加载页头
        $("#header").load("header.html")
    })
</script>

<script>
    var vueapp = new Vue({
        el: "#schedule-vue",
        data: {
            scheduleList: '',           // 记录当前页的所有场次信息
            keyword: '',                // 记录搜索的关键字
            searchCondition: '',        // 记录搜索的条件（上映或者是下架）
            operateCard: 'index',       // 显示的卡片功能 'index'表示主界面，'add'表示添加
            cinemaList: [],             // 所有的影院信息，用于初始化下拉框
            movieList: [],              // 所有的影片信息，用于初始化下拉框
            versionList: [],            // 所有的语言版本信息，用于初始化下拉框
            hallList: [],               // 所有的影厅信息，用于初始化下拉框
            schedule: {
                movieId: '',            // 关联的影片
                versionId: '',          // 影片的语言版本
                cinemaId: '',           // 选中的影院
                hallId: '',             // 影片的放映厅
                startPurchasePrice: '', // 售价
                date: '',               // 放映日期
                time: '',               // 放映时间
            },

            page: "",					// 分页参数
            value: true,				// 是否开启分页隐藏功能
            pageSizes: [5, 10, 20, 30], // 每页条数选项列表
            pagerCount: 5				// 导航按钮数
        },
        computed: {
            // 影片开始放映的时间
            scheduleStartTime: schedule_yh_service.scheduleStartTime,
        },
        watch: {
            // 监听卡片的变化
            "operateCard": schedule_yh_service.watchCard,
            // 监听影院的变化
            "schedule.cinemaId": schedule_yh_service.watchCinema,
            // 监听选中的影片
            "schedule.movieId": schedule_yh_service.watchMovieId,
        },
        methods: {
            findCinemaAll: schedule_yh_controller.findCinemaAll,
            findCinemaByMovieId: schedule_yh_controller.findCinemaByMovieId,
            findMovieAll: schedule_yh_controller.findMovieAll,
            findMovieByCinema: schedule_yh_controller.findMovieByCinema,
            findVersionAll: schedule_yh_controller.findVersionAll,
            findScheduleAll: schedule_yh_controller.findScheduleAll,
            findHallByCinemaId: schedule_yh_controller.findHallByCinemaId,
            searchScheduleByMovieName: schedule_yh_controller.searchScheduleByMovieName,
            updateTodaySchedule: schedule_yh_controller.updateTodaySchedule,
            deleteOldSchedule: schedule_yh_controller.deleteOldSchedule,
            deleteSchedule: schedule_yh_controller.deleteSchedule,
            addSchedule: schedule_yh_controller.addSchedule,
            changeSearchCondition: schedule_yh_service.changeSearchCondition,
            changeOperateCard: schedule_yh_service.changeOperateCard,

            // 分页功能 改变下拉框中每页的记录数时触发
            handleSizeChange: schedule_yh_service.handleSizeChange,
            // 分页功能 点击导航按钮时触发
            handleCurrentChange: schedule_yh_service.handleCurrentChange,
        },
        created: schedule_yh_service.created,
    })
</script>
</body>

</html>